// 权限拦截
// 权限拦截 导航守卫 路由守卫  router
import router from '@/router' // 引入路由实例
import store from '@/store' // 引入vuex store实例
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式
// NProgress 是浏览器加载时,出现在浏览器顶部的进度条

const whiteList = ['/login', '/404'] // 定义白名单  所有不受权限控制的页面

// 路由的前置守卫
// to :即将要进入的目标
// from:当前导航正要离开的路由
// next：跳转去到页面
router.beforeEach(async(to,from,next) => {
    NProgress.start() // 前置守卫--开启进度条
    // 首先判断有无token
    if(store.getters.token){
        if(to.path === './login'){
            next('/') // 跳转到主页
        }else{
            // 放过通行之前，判断用户id是否有,没有再取得用户资料信息
            if (!store.getters.userId) {
                //await：获取完资料再去放行 dispatch分发调用 vuex的获取资料的action
               
                // 加:
                const { roles } = await store.dispatch('user/getUserInfo')
                const routes = await store.dispatch('permission/filterRoutes', roles.menus)
                // routes就是筛选得到的动态路由
                // 动态路由 添加到 路由表中 默认的路由表 只有静态路由 没有动态路由
                // addRoutes  必须 用 next(地址) 不能用next()
                router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加到路由表
                // router.addRoutes(routes) // 添加动态路由到路由表  铺路
                // 添加完动态路由之后
                next(to.path) // 相当于跳到对应的地址  相当于多做一次跳转 为什么要多做一次跳转
                // 进门了，但是进门之后我要去的地方的路还没有铺好，直接走，掉坑里，多做一次跳转，再从门外往里进一次，跳转之前 把路铺好，再次进来的时候，路就铺好了
            }
            next() // 直接放行通过-该跳转哪个页面就跳转到那个页面to.path
        }
    }else{
            if(whiteList.indexOf(to.path) > -1) {
                // >-1在白名单内，直接放行
                next()
            }else{ // 既没有token也不在白名单中
                next('/login') // 跳到登录页
            }
        }
        NProgress.done()  // !!手动强制关闭一次  为了解决手动切换地址时进度条的不关闭的问题
    })

// 路由的后置守卫
router.afterEach(() => {
    NProgress.done()  // 后置守卫--关闭进度条
})